<template>
	<v-content ref="content">
		<div class="list">
			<div
				class="item"
				v-for="item in collectList"
				:key="item.id"
				@click="toPage('/pages/learn/details?id=' + item.id)"
			>
				<image class="image" :src="item.coverImg" mode="aspectFill"></image>
				<div class="text">
					<div class="title">{{ item.courseName }}</div>
					<div class="des">{{ item.courseSynopsis }}</div>
				</div>
			</div>
			<v-empty :list="collectList"></v-empty>
		</div>
	</v-content>
</template>
<script>
import mixins from "@/mixins"
export default {
	mixins: [mixins],
	data() {
		return {
			collectList: [],
		}
	},
	methods: {
		onshow() {
			this.getCollectList()
		},
		async getCollectList() {
			this.collectList = await this.$axios.get("/api/study/course/studyCourse/collectlist")
		},
	},
}
</script>
<style lang="scss" scoped>
.list {
	padding: 27px 18px 0;
	.item {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		image {
			width: 270rpx;
			height: 194rpx;
			border-radius: 18rpx;
			object-fit: cover;
		}
		.text {
			padding-left: 20rpx;
			flex: 1;
			.title {
				// 单行溢出省略
				width: 90%;
				text-overflow: ellipsis; //...
				display: -webkit-box;
				overflow: hidden;
				-webkit-box-orient: vertical;
				line-clamp: 2;
				-webkit-line-clamp: 1; //显示几行
			}
			.des {
				color: #999;
				font-size: 24rpx;
				padding-top: 14rpx;
				width: 90%;
				text-overflow: ellipsis; //...
				display: -webkit-box;
				overflow: hidden;
				-webkit-box-orient: vertical;
				line-clamp: 2;
				-webkit-line-clamp: 1; //显示几行
			}
		}
	}
}
</style>
